<template>
  <div class="link">
    <div class="linkBox">
      <el-button @click="all">全部</el-button>
      <el-button @click="waitPay" >待支付</el-button>
      <el-button @click="alreadyClosed">已关闭</el-button>
      <el-button @click="tobeSure">待确认</el-button>
      <el-button @click="studying">学习中</el-button>
      <el-button @click="done">已完成</el-button>
    </div>
    <hr>
    <div class="sreachBox">
      <p>
          <span>输入搜索</span>
        <el-input
          placeholder="请输入用户昵称或手机号···"
          v-model="inputWorld"
          clearable
          style="width:300px"
        >
        </el-input>
      </p>
      <div class="block">
        <span class="demonstration">上次消费时间：</span>
        <el-date-picker
          v-model="value1"
          align="right"
          type="date"
          placeholder="开始日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker
        >
        ---
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="rest">重置</el-button>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //  ids:[],
      inputWorld: "",
      type1:0,
      type2:1,
      type3:2,
      type4:3,
      type5:4,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
 
  methods:{
    all(){
      this.$store.commit('all')
    },
    waitPay(){
      this.$store.commit('screen',this.type1)
    },
    alreadyClosed(){
      this.$store.commit('screen',this.type2)
    },
    tobeSure(){
      this.$store.commit('screen',this.type3)
    },
    studying(){
      this.$store.commit('screen',this.type4)
    },
    done(){
      this.$store.commit('screen',this.type5)
    },
    search(){
      this.$store.commit('searchName',this.inputWorld)
    },
    rest(){
      this.$store.commit('all')
    },
   
  }
};
</script>

<style lang='less' scoped>
.link {
    background: white;
  .linkBox {
    display: flex;
    justify-content: left;
    height: 62px;
    box-sizing: border-box;
    padding: 30px 0 14px 70px;
    .el-button {
      border: 0;
      height: 20px;
      line-height: 10px;
      background: transparent;
      font-size: 15px;
    }
  }
  .sreachBox {
    height: 100px;
    box-sizing: border-box;
    display: flex;
    padding: 26px 0 30px 30px;
    p{
        width: 350px;
        height: 100%;
        display: flex;
        span{
            width: 100px;
            display: inline-block;
            margin-top: 5px;
        }
    }
    .block{
        margin-left: 30px;
        .el-input--prefix{
            width: 150px;
        }
    }
    .el-button{
        margin-left: 30px;
    }
    
  }
}
</style>